<template>
    <div class="home">
        <block-loading :loading="blockLoading">
            <span class="back_btn" @click="$router.back(-1)"><i class="iconfont icon-fanhui"></i></span>
            <van-row type="flex" justify="space-between" class="banner">
                <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left_football.png')"/>
                <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
            </van-row>
            <van-cell-group class="main_panel m1">
                <van-cell class="select_class_Bar" title="每周各班课程计划"  :value="class_name" ></van-cell>
            </van-cell-group>
            <van-popup v-model="showPicker" round position="bottom">
                <van-picker
                        show-toolbar
                        :columns="classList"
                        @cancel="showPicker = false"
                        value-key="class_name"
                        @confirm="onConfirm"
                />
            </van-popup>
            <!--课程内容-->
            <van-tabs class="tabs" :swipeable="true" animated>
                <van-tab v-for="(item, index) in curriculum.list" :title="'第' + index + '周'">
                    <van-cell-group class="main_panel course_list_panel">
                        <template v-for="(course, courseIndex) in item">
                            <van-cell :title="course.title" value="查看"  class="course_item_title" @click="checkCourse(course,index)">
                                <van-icon class="iconfont" class-prefix="icon" slot="right-icon" name="chakangengduo1"/>
                            </van-cell>
                            <div class="course_item_info"  >
                                <div class="item_title"><span>水平</span><span>难度</span><span>时长</span><span>人数</span></div>
                                <div class="item_content">
                                    <span>{{course.level}}</span>
                                    <span>{{course.difficulty}}</span>
                                    <span>{{course.duration}}</span>
                                    <span>{{course.people_num}}</span>
                                </div>
                            </div>
                        </template>
                    </van-cell-group>
                </van-tab>
            </van-tabs>
        </block-loading>
    </div>
</template>

<script>
// @ is an alias to /src
import $api from "@/api/index";

export default {
  name: "selectTryCourse",
  data() {
    return {
      className: '',
      class_name:'',
      school_class_id: '',
      curriculum:{},
      classList: [],
      showPicker: false,
      btnLoading: false,
      blockLoading: false,
    };
  },
  created(){
    this.class_name = this.$route.query.class_name
    this.getCurriculum()
  },
  methods: {
    // 选择班级
    onConfirm(value) {
      this.className = value.class_name;
      this.school_class_id = value.school_class_id
      this.showPicker = false;
      this.getCurriculum()
    },
    // 获取班级课程
    getCurriculum(){
     let loading=this.$toast.loading({
        message: '课程加载中...',
        forbidClick: true,
        duration:0,
        loadingType: 'spinner',
      });
      $api.school.getExperienceCurriculum({}).then(res => {
        this.curriculum=res.data
      }).finally(res => {
        loading.clear()
      })
    },
    // 查看课程详情
    checkCourse(course,index){
      if(index>=2){
        this.$dialog.alert({
          title: '友情提示',
          message: '体验课程只能查看第一周的内容，查看更多内容，请前往定制',
          theme: 'round-button',
          overlay:true,
          closeOnClickOverlay:true
        }).then(() => {
          this.$router.push({path:'course_buy'})
        });
        return false
      }
      let improve_id= course.improve_id
      let class_id= 1
      let key = index
      this.$router.push({name:'courseDetail',query: {improve_id,class_id,key}})
    }
  },
};
</script>
<style lang="scss" scoped>
    ::v-deep {
        .banner .banner_left {
            width: 268px;
            height: 280px;
            margin-left: 50px;
            margin-top: -10px;
        }
        .main_panel {
            padding: 0 10px;
        }
        .select_class_Bar {
            font-size: 30px;
            padding: 25px 10px;
            &:after {
                left: 0;
            }
        }
        .last_name {
            padding: 25px 0;
            text-align: center;
            font-size: 30px;
            font-weight: 500;
            color: #FF3545;
        }
        .tabs {
            margin-top: 20px;
            margin-bottom: 20px;
            height: 86px;
            box-shadow: 0px 2px 9px 0px rgba(51, 51, 51, 0.1);
            .van-tab {
                font-size: 28px;
                color: #333;
                z-index: 2;
            }
            .van-tab--active {
                span {
                    color: #fff;
                    padding: 8px 20px;
                }
            }
            .van-tabs__line {
                background: #FF804E;
                border-radius: 10px;
                bottom: 50px;
                height: 48px;
                padding: 0 10px;
                &:after {
                    content: '';
                    position: absolute;
                    bottom: -38px;
                    left: 50%;
                    margin-left: -13px;
                    border-top: 20px solid #FF804E;
                    border-right: 13px solid transparent;
                    border-left: 13px solid transparent;
                    border-bottom: 20px solid transparent;
                }
            }
            .course_list_panel{
                margin-top: 20px;
            }
        }
        .course_item_title{
            font-size: 30px;
            padding: 25px 10px 10px;
            &:after {
                display: none;
            }
            .van-cell__value{
                font-size: 24px
            }
            .van-cell__title{
                font-size: 28px;
                color: #333;
                font-weight: bold;
            }
            .iconfont{
                font-size: 20px;
                color: #999999;
                margin-left: 10px;
            }
        }
        .course_item_info{
            width:100%;
            border-bottom: 1px solid #E6E6E6;
            box-sizing: border-box;
            padding:0 10px;
            &:last-child{
                border-bottom: 0;
            }
            .item_title,.item_content{
                display: flex;
                justify-content: space-around;
                width: 100%;
                line-height: 66px;
            }
            .item_title{
                font-size: 28px;
                background: #FDF4F0;
                height: 66px;
                font-weight: 700;
                color: #515151;
            }
            .item_content{
                font-size: 26px;
                color: #999999;
            }
        }
    }
</style>
